<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form
        :model="form"
        ref="form"
        label-position="left"
        label-width="80px"
        onsubmit="return false"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect2
                v-model="form.companyId"
                :optionlist="companyList"
                :valuekey="{ name: 'name', value: 'id' }"
                @changeSelect="companyChange"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-top: 4px; display: flex">
            <el-radio-group
              size="small"
              v-model="radio"
              style="margin-right: 20px"
            >
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
            <el-date-picker
              style="flex: 1"
              size="small"
              v-model="date"
              :type="this.radio == '月' ? 'month' : 'year'"
              :format="this.radio == '月' ? 'yyyy-MM' : 'yyyy'"
              placeholder="选择时间"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="13" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="chaxun" @chongzhi="chongzhi"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="titlebox">
        <div class="text"></div>
        <TopTile
          @command="command"
          @daochu="daochu"
          @shuaxin="shuaxin"
        ></TopTile>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        style="width: 100%"
        height="77vh"
        border
        ref="table"
        :size="iissize"
        :header-cell-style="{
          background: '#f5f5f5',
          'text-align': 'center'
        }"
      >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" label="序号" width="100px">
        </el-table-column>
        <el-table-column prop="companyName" label="用电企业" width="400px">
        </el-table-column>
        <el-table-column
          align="center"
          prop="timeReading"
          label="时间"
          width="400px"
        >
        </el-table-column>
        <el-table-column label="能源类型/介质">
          <el-table-column align="right" prop="valueReading" label="电(kWh)">
          </el-table-column>
          <el-table-column align="right" prop="water" label="水(t)">
          </el-table-column>
          <el-table-column align="right" prop="gas" label="气(m³)">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import dayjs from 'dayjs'
import { getOverallListApi } from '@/api/energy-consumption/Report-management/Overall-report'
import { exportexcel } from '@/utils/excel'
export default {
  name: 'EquipmentEnergyAnalysis',
  data() {
    return {
      radio: '月',
      radio2: '主要设备',
      form: {},
      date: null,
      total: 0,
      tableList: [],
      companyList: [],
      loading: false,
      iissize: 'medium'
    }
  },
  watch: {
    radio: {
      handler(newValue) {
        if (this.radio === '月') {
          this.date = dayjs().format('YYYY-MM')
        } else if (this.radio === '年') {
          this.date = dayjs().format('YYYY')
        }
      },
      immediate: true
    },
    date: {
      handler(newValue) {
        if (this.radio === '月') {
          this.date = dayjs(newValue).format('YYYY-MM')
        } else if (this.radio === '年') {
          this.date = dayjs(newValue).format('YYYY')
        }
      },
      immediate: true
    }
  },
  async created() {
    await this.getCompanyList()
    await this.getdatalist()
  },
  methods: {
    companyChange(val) {
      if (val) {
        localStorage.setItem('companyId', val)
      }
    },
    // 获取用电企业列表
    async getCompanyList() {
      const res = await getCompanyListApi()
      console.log(res)
      this.companyList = res.data.list
      const companyId = +localStorage.getItem('companyId')
      if (companyId && this.companyList.find((i) => i.id == companyId)) {
        this.$set(this.form, 'companyId', companyId)
      } else {
        this.$set(this.form, 'companyId', this.companyList[0].id)
      }
    },
    // 初始化
    async getchushihua() {
      this.form.companyId = this.companyList[0].id
      localStorage.setItem('companyId', this.companyList[0].id)
      this.radio = '月'
    },
    // 获取数据
    async getdatalist() {
      this.loading = true
      const res = await getOverallListApi({
        companyId: this.form.companyId,
        dateString: this.date,
        dateType: this.radio === '月' ? 2 : 3,
        pageNo: 0,
        pageSize: 1000
      })
      this.tableList = res.data.list
      this.loading = false
    },
    chaxun() {
      this.getdatalist()
    },
    // 导出
    daochu() {
      exportexcel(
        '/ecm-microservice-biz/ecm/energy/all/report/data/analyse/exportExcel',
        {
          companyId: this.form.companyId,
          dateString: this.date,
          dateType: this.radio === '月' ? 2 : 3
        },
        '能耗整体报表'
      )
    },
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    async shuaxin() {
      await this.getdatalist()
      this.$message({
        message: '刷新成功',
        type: 'success',
        duration: 2000
      })
    },
    async chongzhi() {
      await this.getchushihua()
      this.getdatalist()
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
.tit {
  display: flex;
  align-items: center;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: -20px;
  font-weight: bold;
  img {
    margin-right: 10px;
  }
}

.bigbox {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #f1f1f1;
  height: 100%;
  .topbox {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 10px;
    // transition-property: all;
    // transition-duration: 0.2s;
  }
  .bodybox {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    .titlebox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .text {
        font-size: 16px;
      }
      .right {
        align-items: center;
        i {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
